<template>
<view class="open" v-show='isshow'>
	<view class="all"  @click='close'></view>
	<view class="bot" :class="isshow1?'top':'bottom'">
		<slot></slot>
	</view>
</view>
</template>

<script>
	export default {
		name:"open",
		data() {
			return {
				isshow:false,
				isshow1:false,
				bottom:0
			};
		},
		created() {
			let that = this
			uni.getSystemInfo({
			    success: function (res) {
			        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
			        model.forEach(item => {
			            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
			            if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
			                that.bottom = 40;
			            }
			        })
			    }
			});
		},
		methods:{
			show(){
				this.isshow=true
				this.$nextTick(()=>{
					this.isshow1=true
				})
			},
			close(){
				this.isshow1=false
				setTimeout(()=>{
					this.isshow=false
				},300)
				this.$emit('close')
			},
			showhb(){
				this.$emit('showhaibao')
			}
		}
	}
</script>

<style scoped lang="scss">
.open{
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1001;
	background-color: rgba($color: #000000, $alpha: .5);
	.all{
		width: 100%;
		height: 100%;
	}
	.bot{
		position: absolute;
		z-index: 1001;
		right: 0;
		top: 0;
		width: 70%;
		height: 100%;
		background-color: #fff;
		// padding-top: 10px;
		transition: all 0.3s;
	}
	.top{
		// transform: translateX(100%);
	}
	.bottom{
		transform: translateX(100%);
	}
}
</style>
